<template>
  <div class="common-layout">
    <el-container>
      <!-- 添加事件监听 -->
      <LeftLayout
          :isCollapse="isCollapse"
          @showUserList="activeView = 'user'"
          @showLogAdrList="activeView = 'log'"
          @showHistorySql="activeView = 'historySql'"
          @showGeneratedHistorySql="activeView = 'generatedHistorySql'"
          @generator="activeView = 'codeGenerator'"
      />
      <el-container>
        <el-header style="padding: 0">
          <Header @parentClick="parentClick" />
        </el-header>

        <el-main style="padding: 16px 8px 6px 8px">
          <MainView
              :showUserList="activeView === 'user'"
              :showLogAdrList="activeView === 'log'"
              :showHistorySql="activeView === 'historySql'"
              :showGeneratedHistorySql="activeView === 'generatedHistorySql'"
              :showCodeGenerator="activeView === 'codeGenerator'"
              @closeUserList="activeView = ''"
              @closeLogAdrList="activeView = ''"
              @closeHistorySql="activeView = ''"
              @closeGeneratedHistorySql="activeView = ''"
              @closeCodeGenerator="activeView = ''"
          />
        </el-main>

        <el-footer>后台 ©2024</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LeftLayout from './LeftLayout.vue'
import Header from './Header.vue'
import MainView from './MainView.vue'

const isCollapse = ref(false)
const activeView = ref('') // 单一状态变量管理显示哪个视图

const parentClick = (isCollapseValue) => {
  isCollapse.value = isCollapseValue
}
</script>